<template>
	<view class="container">
		<view class="section">
			<view class="section-header">报修人员</view>
			<view class="form-group">
				<view class="form-item">
					<text class="label">姓名</text>
					<input class="input" type="text" placeholder="请输入姓名" disabled="true" v-model="userInfo.realname" />
				</view>
				<view class="form-item">
					<text class="label">学号</text>
					<input class="input" type="text" placeholder="请输入学号" disabled="true" v-model="userInfo.stunum" />
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<input class="input" type="text" placeholder="请输入手机号" disabled="true" v-model="userInfo.phone" />
				</view>
			</view>
		</view>

		<!-- 维修信息 -->
		<view class="section">
			<view class="section-header">维修信息</view>
			<view class="form-group">
				<view class="form-item">
					<text class="label">电脑类型</text>
					<radio-group @change="onComputerTypeChange">
						<label class="radio-item">
							<radio value="2" :checked="FormData.rPcType === '2'" />
							台式
						</label>
						<label class="radio-item">
							<radio value="1" :checked="FormData.rPcType === '1'" />
							笔记本
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">电脑型号</text>
					<input class="input" type="text" placeholder="请输入电脑型号" v-model="FormData.rPcName" disabled="true" />
				</view>
				<view class="form-item">
					<text class="label">问题描述</text>
					<input class="input" type="text" placeholder="请输入电脑问题" v-model="FormData.rReason" disabled="true" />
				</view>
				<view class="form-item">
					<text class="label">图片</text>
					<uni-file-picker limit="5" file-mediatype="image" :list-style="false" mode="grid" v-model="fileList"
						@change="onFileChange" />
				</view>
			</view>
		</view>

		<!-- 预约信息 -->
		<view class="section">
			<view class="section-header">预约信息</view>
			<view class="form-group">
				<view class="form-item">
					<text class="label">预约时间</text>
					<uni-datetime-picker type="date" :clear-icon="false" v-model="FormData.data"
						disabled="true"></uni-datetime-picker>
				</view>
				<view class="form-item">
					<text class="label">宿舍号</text>
					<input class="input" type="text" placeholder="请输入宿舍号" disabled="true" v-model="userInfo.dormmun" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfo
	} from 'os';
	import API from '../../../api/api';
	import '../../../common/css/repair.scss'
	export default {
		data() {
			return {
				FormData: {
					rPcName: '',
					rReason: '',
					rPcType: '',
					data: ''
				},
				fileList: [],
				id: null,
				userInfo: {
					realname: '',
					dormmun: '',
					phone: '',
					stunum: ''
				}
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getRepairInfo()
		},
		methods: {
			async getRepairInfo() {
				let id = this.id
				let res = await API.getUserRepairInfo(id)
				console.log(res)
				this.FormData.rPcName = res.data.repair_info.rpcName;
				this.FormData.rReason = res.data.repair_info.rreason;
				this.FormData.rPcType = res.data.repair_info.rpcType;
				this.FormData.data = res.data.repair_info.rreserveTime;
				this.userInfo = res.data.user_info

				if (res.data.repair_info.rimgList) {
					this.fileList = JSON.parse(res.data.repair_info.rimgList).map(item => ({
						url: item.url
					}));
				} else {
					this.fileList = [];
				}

			}
		}
	}
</script>

<style>

</style>